import type { Preview } from "@storybook/react-vite";
import "../src/styles.css";
import React from "react";

// 添加全局样式确保 Storybook 容器有正确的尺寸
const globalStyles = `
  #storybook-root {
    width: 100% !important;
    min-height: 100vh !important;
  }
  .sb-show-main {
    width: 100% !important;
  }
`;

// 注入全局样式
if (typeof document !== "undefined") {
  const style = document.createElement("style");
  style.textContent = globalStyles;
  document.head.appendChild(style);
}

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    docs: {
      description: {
        component:
          "cxl-react-components 是一个功能强大的 React 组件库，专注于提供高质量的 UI 组件，支持 Tailwind CSS 和 TypeScript。",
      },
    },
    layout: "centered",
  },
  decorators: [
    (Story) =>
      React.createElement(
        "div",
        {
          style: {
            padding: "20px",
            minHeight: "400px",
            width: "100%",
            maxWidth: "1200px",
            margin: "0 auto",
          },
        },
        React.createElement(Story)
      ),
  ],
};

export default preview;
